<template>
  <div class="app-container calendar-list-container user-container">

    <el-tabs v-model="currentTab" style="height: auto;" tab-position="left" @tab-click="handleTabClick">
      <el-tab-pane v-for="page in pageList" :key="page.value" :label="page.label" :name="page.value">
        <el-tabs style="height: auto;" @tab-click="handleCategoryTabClick">
          <el-tab-pane label="页面信息">
            <el-row class="cutOffLine" type="flex">
              <el-col :span="12">
                <el-descriptions :column="2" border title="基础信息">
                  <template slot="extra">
                    <el-button size="small" type="primary" @click="refreshModel">刷新</el-button>
                  </template>
                  <el-descriptions-item label="数据库名称">{{ model.sqlDbName }}</el-descriptions-item>
                  <el-descriptions-item label="表名称">{{ model.sqlTableName }}</el-descriptions-item>
                  <el-descriptions-item label="英文名称">{{ model.value }}</el-descriptions-item>
                  <el-descriptions-item label="中文名称"> {{ model.name }}</el-descriptions-item>
                </el-descriptions>
              </el-col>
              <el-col :span="8">
              </el-col>
            </el-row>
            <el-row class="cutOffLine" type="flex">
              <el-col :span="18">
                <el-descriptions :column="2" border title="基础功能">
                  <template slot="extra">
                    <el-button size="small" type="primary" @click="saveModel">保存</el-button>
                  </template>
                  <el-descriptions-item label="添加按钮">
                    <el-switch v-model="model.addButton"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="修改按钮">
                    <el-switch v-model="model.modifyButton"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="复制按钮">
                    <el-switch v-model="model.copyButton"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="失效按钮">
                    <el-switch v-model="model.disableButton"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="删除按钮">
                    <el-switch v-model="model.deleteButton"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="导出按钮">
                    <el-switch v-model="model.exportButton"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="导入按钮">
                    <el-switch v-model="model.uploadButton"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="刷新按钮">
                    <el-switch v-model="model.refreshButton"/>
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
              <el-col :span="4">
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="表格信息">
            <el-row class="cutOffLine" type="flex">
              <el-col :span="16">
                <el-descriptions :column="3" border title="关键字段">
                  <el-descriptions-item label="id字段">
                    <el-select v-model="idField" clearable>
                      <el-option v-for="(key, index) in layoutMap.keys()"
                                 v-if="
                                   layoutMap.get(key).property !== ''
                                   &&
                                   layoutMap.get(key).hidden
                                   &&
                                   !layoutMap.get(key).custom"
                                 :key="index"
                                 :label="layoutMap.get(key).displayName"
                                 :value="key"/>
                    </el-select>
                  </el-descriptions-item>
                  <el-descriptions-item label="pid字段">
                    <el-select v-model="pidField" clearable>
                      <el-option v-for="(key, index) in layoutMap.keys()"
                                 v-if="
                                   layoutMap.get(key).property !== ''
                                   &&
                                   layoutMap.get(key).hidden
                                   &&
                                   !layoutMap.get(key).custom"
                                 :key="index"
                                 :label="layoutMap.get(key).displayName"
                                 :value="key"/>
                    </el-select>
                  </el-descriptions-item>
                  <el-descriptions-item label="显示字段">
                    <el-select v-model="displayField" clearable>
                      <el-option v-for="(key, index) in layoutMap.keys()"
                                 v-if="
                                   layoutMap.get(key).property !== ''
                                   &&
                                   !layoutMap.get(key).hidden
                                   &&
                                   !layoutMap.get(key).custom"
                                 :key="index"
                                 :label="layoutMap.get(key).displayName"
                                 :value="key"/>
                    </el-select>
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>
            <el-row class="cutOffLine" type="flex">
              <el-col :span="20">
                <el-descriptions :column="1" border title="字段属性">
                  <template slot="extra">
                    <el-button size="small" type="primary" @click="addLayout">新增</el-button>
                    <el-button :disabled="currentRow == null" size="small" type="primary" @click="deleteLayout">删除
                    </el-button>
                    <el-button size="small" type="primary" @click="saveLayout">保存</el-button>
                    <el-button size="small" type="primary" @click="resetLayout">重置</el-button>
                  </template>
                </el-descriptions>
                <el-table
                  ref="layoutTable"
                  :data="layout"
                  :default-sort="{prop: 'displayOrder', order: 'ascending'}"
                  border
                  highlight-current-row
                  class="layoutTable"
                  element-loading-background="rgba(0, 0, 0, 0.8)"
                  element-loading-spinner="el-icon-loading"
                  element-loading-text="拼命加载中"
                  style="width: 100%"
                  @current-change="handleCurrentChange">
                  <el-table-column
                    align="center"
                    label=''
                    property="displayOrder"
                    width="40px">
                    <template slot-scope="scope">
                      <div class="order-arrow">
                          <el-button
                            v-if="scope.$index !== 0"
                            plain
                            type="primary"
                            size="mini"
                            icon="el-icon-arrow-up"
                            @click="handleUp(scope.$index, layout)">
                          </el-button>
                          <el-button
                            v-if="scope.$index !== layout.length-1"
                            plain
                            type="primary"
                            size="mini"
                            icon="el-icon-arrow-down"
                            @click="handleDown(scope.$index, layout)">
                          </el-button>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label='id'
                    width="40px">
                    <template slot-scope="scope">
                      <el-radio v-model="idField" :label="scope.row.property">{{ '' }}</el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label='pid'
                    width="40px">
                    <template slot-scope="scope">
                      <el-radio v-model="pidField" :label="scope.row.property">{{ '' }}</el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label='显示'
                    width="40px">
                    <template slot-scope="scope">
                      <el-radio v-model="displayField" :label="scope.row.property">{{ '' }}</el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label='字段'
                    width="200px">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.property"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label='字段名称显示'
                    width="200px">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.displayName"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label='字段类型'
                    width="120px">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.dataType"
                                 @change="handleDataTypeChanged(scope.row)">
                        <el-option v-for="(dict, index) in dataTypeDict"
                                   :key="index"
                                   :label="dict.label"
                                   :value="dict.value"/>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label='关联字典'>
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.reference" :disabled="scope.row.dataType != 'ENUM'"/>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label='必要字段'
                    width="80px">
                    <template slot-scope="scope">
                      <el-switch v-model="scope.row.required"/>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label='只读'
                    width="80px">
                    <template slot-scope="scope">
                      <el-switch v-model="scope.row.readOnly"/>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label='只写'
                    width="80px">
                    <template slot-scope="scope">
                      <el-switch v-model="scope.row.writeOnly"/>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label='隐藏'
                    width="80px">
                    <template slot-scope="scope">
                      <el-switch v-model="scope.row.hidden"/>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label='自定义'
                    width="80px">
                    <template slot-scope="scope">
                      <el-switch v-model="scope.row.custom" disabled/>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label='上传'
                    width="80px">
                    <template slot-scope="scope">
                      <el-switch v-model="scope.row.upload"/>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="4"/>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="查询条件">
            <el-row class="cutOffLine" type="flex">
              <el-col :span="10">
                <el-descriptions :column="2" border title="查询条件配置">
                  <template slot="extra">
                    <el-button size="small" type="primary" @click="addCondition">新增</el-button>
                    <el-button :disabled="currentRow == null" size="small" type="primary" @click="deleteCondition">删除
                    </el-button>
                    <el-button size="small" type="primary" @click="saveCondition">保存</el-button>
                    <el-button size="small" type="primary" @click="resetCondition">重置</el-button>
                  </template>
                </el-descriptions>
                <el-table
                  ref="layoutTable"
                  :data="condition"
                  border
                  class="layoutTable"
                  element-loading-background="rgba(0, 0, 0, 0.8)"
                  element-loading-spinner="el-icon-loading"
                  element-loading-text="拼命加载中"
                  highlight-current-row
                  style="width: 100%"
                  @current-change="handleCurrentChange">
                  <el-table-column
                    align="center"
                    label='字段名称'
                    width="200px">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.property"
                                 @change="$forceUpdate()">
                        <el-option v-for="(key, index) in layoutMap.keys()"
                                   v-if="
                                   layoutMap.get(key).property !== ''
                                   &&
                                   !layoutMap.get(key).hidden
                                   &&
                                   !layoutMap.get(key).custom"
                                   :key="index"
                                   :label="layoutMap.get(key).displayName"
                                   :value="key"/>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label='查询关系'>
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.relation"
                                 @change="$forceUpdate()">
                        <el-option
                          v-for="(dict, index) in conditionRelationMap.get(layoutMap.get(scope.row.property).dataType)"
                          :key="index"
                          :label="dict.label"
                          :value="dict.value"/>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label='状态'
                    width="80px">
                    <template slot-scope="scope">
                      <el-switch v-model="scope.row.status"/>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="16"/>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
const EQUAL = {label: '等于', value: 0, display: ''}
const NOT_EQUAL = {label: '不等于', value: 1, display: '不同于查询内容'}
const GREATER = {label: '大于', value: 2, display: '大于查询内容'}
const GREATER_AND_EQUAL = {label: '大于等于', value: 3, display: '大于或等于查询内容'}
const LESS = {label: '小于', value: 4, display: '小于查询内容'}
const LESS_AND_EQUAL = {label: '小于等于', value: 5, display: '小于或等于查询内容'}
const IS_NULL = {label: '空', value: 6, display: '为空'}
const NOT_NULL = {label: '非空', value: 7, display: '不为空'}
const LIKE = {label: '模糊', value: 8, display: '包含查询内容'}
const MULTI = {label: '介于', value: 10, display: '位于查询内容列表中'}
const NOT_MULTI = {label: '不介于', value: 11, display: '不在查询内容列表中'}
// const NOT_EQUAL_OR_NULL = {label: '不等于或为空', value: 12}
const BETWEEN = {label: '时间介于之间', value: 13, display: '介于之间'}
const NOT_BETWEEN = {label: '时间介于之外', value: 14, display: '介于之外'}
const BETWEEN_OR_EQUAL = {label: '时间介于之间(包含)', value: 15, display: '介于之间(包含)'}
const NOT_BETWEEN_AND_EQUAL = {label: '时间介于之外(不包含)', value: 16, display: '介于之外(不包含)'}

const dataType = {
  input: 'STRING',
  inputNumber: 'NUMBER',
  boolean: 'BOOLEAN',
  select: 'ENUM',
  cascader: 'TREE',
  date: 'DATE',
  datetime: 'DATETIME',
  upload: 'LINK',
  html: 'HTML',
  textArea: 'TEXT'
}
export default {
  name: 'page',
  data() {
    return {
      apiName: {
        getAllPortalPageDict: this.apiType.sys.getAllPortalPageDict,
        getPortalPageModel: this.apiType.sys.getPortalPageModel,
        savePortalPageModel: this.apiType.sys.savePortalPageModel,
        refreshPortalPageModel: this.apiType.sys.refreshPortalPageModel,
        getPortalPageLayout: this.apiType.sys.getPortalPageLayout,
        savePortalPageLayout: this.apiType.sys.savePortalPageLayout,
        getPortalPageCondition: this.apiType.sys.getPortalPageCondition,
        savePortalPageCondition: this.apiType.sys.savePortalPageCondition
      },
      model: {
        id: '',
        value: '',
        name: '',

        idField: '',
        pidField: '',

        addButton: false,
        modifyButton: false,
        copyButton: false,
        disableButton: false,
        deleteButton: false,

        uploadButton: false,
        refreshButton: false,
        exportButton: false,

        readOnly: false,

        sqlDbName: '',
        sqlTableName: ''

      },
      dataTypeDict: [
        {value: 'STRING', label: '输入框'},
        {value: 'NUMBER', label: '数字'},
        {value: 'BOOLEAN', label: '真值'},
        {value: 'ENUM', label: '下拉选择'},
        {value: 'TREE', label: '属性选择'},
        {value: 'DATE', label: '日期'},
        {value: 'DATETIME', label: '日期时间'},
        {value: 'LINK', label: '超链接'},
        {value: 'HTML', label: '富文本'},
        {value: 'TEXT', label: '文字段落'}
      ],
      defaultLayout: {
        property: '',
        name: '',
        dataType: 'STRING',
        required: false,
        readOnly: true,
        writeOnly: false,
        hidden: false,
        custom: true,
        idField: false,
        pidField: false,
        displayField: false
      },
      layout: [],
      layoutMap: new Map(),
      currentTab: {},
      currentRow: null,
      idField: null,
      pidField: null,
      displayField: null,
      pageList: [],
      defaultCondition: {
        property: '',
        relation: EQUAL.value,
        status: true
      },
      conditionRelationMap: new Map(),
      condition: [],
      page: {
        total: 0,
        current: 1,
        size: 20
      },
      remoteDialog: {
        title: ''
      }

    }
  },
  methods: {
    log(data) {
      console.log(data)
    },
    // page
    getPageList() {
      this.fetch(this.apiName.getAllPortalPageDict, null, null, (data) => {
        this.pageList = data.data || []
        this.currentTab = this.pageList[0].value
        this.getModel()
        this.getLayout()
      }, null, false)
    },
    // model
    getModel() {
      const param = {
        uri: this.currentTab
      }
      this.fetch(this.apiName.getPortalPageModel, param, null, (respData) => {
        this.model = {
          ...respData.data,
          readOnly: respData.data.readOnly === '1',
          treeFormat: respData.data.readOnly === '1',
          addButton: respData.data.addButton === '1',
          modifyButton: respData.data.modifyButton === '1',
          copyButton: respData.data.copyButton === '1',
          disableButton: respData.data.disableButton === '1',
          deleteButton: respData.data.deleteButton === '1',
          exportButton: respData.data.exportButton === '1',
          importButton: respData.data.importButton === '1',
          refreshButton: respData.data.refreshButton === '1'
        }
      }, null, false)
    },
    saveModel() {
      const body = {
        ...this.model,
        readOnly: this.model.readOnly ? '1' : '0',
        treeFormat: this.model.readOnly ? '1' : '0',
        addButton: this.model.addButton ? '1' : '0',
        modifyButton: this.model.modifyButton ? '1' : '0',
        copyButton: this.model.copyButton ? '1' : '0',
        disableButton: this.model.disableButton ? '1' : '0',
        deleteButton: this.model.deleteButton ? '1' : '0',
        exportButton: this.model.exportButton ? '1' : '0',
        importButton: this.model.importButton ? '1' : '0',
        refreshButton: this.model.refreshButton ? '1' : '0',
        uploadButton: this.model.uploadButton ? '1' : '0'
      }
      this.fetch(this.apiName.savePortalPageModel, null, body, (data) => {
        this.getModel()
      }, null, false)
    },
    refreshModel() {
      const param = {
        uri: this.currentTab
      }
      console.log(this.apiType.sys)
      this.fetch(this.apiName.refreshPortalPageModel, param, null, (data) => {
        this.getModel()
        this.getLayout()
      }, null, false)
    },
    handleTabClick(tab, event) {
      this.getModel()
      this.getLayout()
      this.currentRow = null
    },
    handleCategoryTabClick() {
      this.currentRow = null
    },
    // layout
    getLayout() {
      const param = {
        uri: this.currentTab
      }
      this.fetch(this.apiName.getPortalPageLayout, param, null, (data) => {
        this.layout = data.data || []
        this.layoutMap = new Map()
        this.layoutMap.set('', this.defaultLayout)
        for (let index in this.layout) {
          this.layout[index].custom = this.layout[index].custom === '1'
          this.layout[index].hidden = this.layout[index].hidden === '1'
          this.layout[index].idField = this.layout[index].idField === '1'
          this.layout[index].pidField = this.layout[index].pidField === '1'
          this.layout[index].readOnly = this.layout[index].readOnly === '1'
          this.layout[index].required = this.layout[index].required === '1'
          this.layout[index].upload = this.layout[index].upload === '1'
          this.layout[index].writeOnly = this.layout[index].writeOnly === '1'
          this.layoutMap.set(this.layout[index].property, this.layout[index])
        }
        console.log(this.layoutMap)
        this.currentRow = null
      }, null, false)
    },
    addLayout() {
      const newLayout = {
        ...this.defaultLayout
      }
      this.layout.push(newLayout)
    },
    deleteLayout() {
      this.layout.splice(this.layout.indexOf(this.currentRow), 1)
    },
    saveLayout() {
      const layoutList = []
      for (let index in this.layout) {
        let layoutTemp = {
          ...this.layout[index],
          custom: this.layout[index].custom ? '1' : '0',
          hidden: this.layout[index].hidden ? '1' : '0',
          idField: this.layout[index].idField ? '1' : '0',
          pidField: this.layout[index].pidField ? '1' : '0',
          readOnly: this.layout[index].readOnly ? '1' : '0',
          required: this.layout[index].required ? '1' : '0',
          upload: this.layout[index].upload ? '1' : '0',
          writeOnly: this.layout[index].writeOnly ? '1' : '0'
        }
        layoutList.push(layoutTemp)
      }
      const body = {
        path: this.currentTab,
        layoutList: layoutList
      }
      this.fetch(this.apiName.savePortalPageLayout, null, body, (data) => {
        this.getLayout()
      }, null, false)
    },
    resetLayout() {
      this.getLayout()
    },
    handleDataTypeChanged(row) {
      row.reference = ''
      this.$forceUpdate()
    },
    handleUp($index) {
      if ($index === 0) {
        return
      }
      this.swapItems(this.layout, $index, $index - 1)
    },
    handleDown($index) {
      if ($index === this.layout.length - 1) {
        return
      }
      this.swapItems(this.layout, $index, $index + 1)
    },
    swapItems(arr, index1, index2) {
      const temp = arr[index1].displayOrder
      arr[index1].displayOrder = arr[index2].displayOrder
      arr[index2].displayOrder = temp
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },
    // condition
    initConditionRelationMap() {
      this.conditionRelationMap.set('', [EQUAL, NOT_EQUAL, GREATER, GREATER_AND_EQUAL, LESS, LESS_AND_EQUAL, IS_NULL, NOT_NULL, LIKE, MULTI, NOT_MULTI])
      this.conditionRelationMap.set(dataType.input, [EQUAL, NOT_EQUAL, IS_NULL, NOT_NULL, LIKE])
      this.conditionRelationMap.set(dataType.inputNumber, [EQUAL, NOT_EQUAL, GREATER, GREATER_AND_EQUAL, LESS, LESS_AND_EQUAL, IS_NULL, NOT_NULL])
      this.conditionRelationMap.set(dataType.boolean, [EQUAL, NOT_EQUAL, IS_NULL, NOT_NULL])
      this.conditionRelationMap.set(dataType.select, [EQUAL, NOT_EQUAL, IS_NULL, NOT_NULL, MULTI, NOT_MULTI])
      this.conditionRelationMap.set(dataType.cascader, [EQUAL, NOT_EQUAL, IS_NULL, NOT_NULL, MULTI, NOT_MULTI])
      this.conditionRelationMap.set(dataType.date, [BETWEEN_OR_EQUAL, BETWEEN, NOT_BETWEEN, NOT_BETWEEN_AND_EQUAL, GREATER, GREATER_AND_EQUAL, LESS, LESS_AND_EQUAL])
      this.conditionRelationMap.set(dataType.datetime, [BETWEEN_OR_EQUAL, BETWEEN, NOT_BETWEEN, NOT_BETWEEN_AND_EQUAL, GREATER, GREATER_AND_EQUAL, LESS, LESS_AND_EQUAL])
      this.conditionRelationMap.set(dataType.upload, [LIKE])
      this.conditionRelationMap.set(dataType.html, [LIKE])
      this.conditionRelationMap.set(dataType.textArea, [LIKE])
    },
    getCondition() {
      const param = {
        uri: this.currentTab
      }
      this.fetch(this.apiName.getPortalPageCondition, param, null, (data) => {
        this.condition = data.data || []
        this.currentRow = null
      }, null, false)
    },
    addCondition() {
      const newCondition = {
        ...this.defaultCondition
      }
      this.condition.push(newCondition)
    },
    deleteCondition() {
      this.condition.splice(this.condition.indexOf(this.currentRow), 1)
    },
    saveCondition() {
      const body = {
        path: this.currentTab,
        conditionList: this.condition
      }
      this.fetch(this.apiName.savePortalPageCondition, null, body, (data) => {
        this.getCondition()
      }, null, false)
    },
    resetCondition() {
      this.getCondition()
    },

    handleCurrentChange(currentRow) {
      this.currentRow = currentRow
    },
    handleSizeChange() {

    },
    handleCurrentPageChange() {

    }
  },
  created() {
    this.getPageList()
  },
  mounted() {
    this.initConditionRelationMap()
  }
}
</script>

<style scoped>
>>> .el-form-item--medium .el-form-item__label {
  text-align: left;
  width: 80px !important;
}

>>> .el-form-item--medium .el-form-item__content, .el-form-item--medium .el-form-item__label {
  padding: 5px 10px 4px 0;
}

.cutOffLine {
  border-bottom: 5px solid #E5E5E5;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.cutOff {
  margin-bottom: 14px;
  padding-bottom: 14px;
}

>>> .layoutTable .el-radio__label {
  padding-left: 0px;
}

.order-arrow {
  display: flex;
  flex-direction: column;
}

>>> .order-arrow .el-button + .el-button {
  margin-left: 0px;
}
</style>
